<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { createProjectDonationService, getProjectDetailService } from '@/common/service/projects'
import type { ProjectDetail } from '@/common/types/projects'
import mpHtml from '@/common/components/mp-html/mp-html.vue'
import { IconPath, PagePath, PageTitle } from '@/common/constants'
import { ProjectMoney } from '@/common/enum'

const popupRef = ref()

const domain = import.meta.env.HOPE_ALI_YUN_OSS_URL

/**
 * 打开弹框
 */
const openPopup = () => {
  console.log('打开弹框')

  popupRef.value.open('bottom')
}

/**
 * 关闭弹框
 */
const closePopup = () => {
  popupRef.value.close()
}

/** 项目详情数据 */
const projectDetail = ref<ProjectDetail>()

/**
 * 根据项目id获取项目详情
 * @param projectId
 */
const getProjectDetail = async (projectId: number) => {
  const { data } = await getProjectDetailService(projectId)
  console.log('data:', data.raisedAmount, data.targetAmount)
  projectDetail.value = data
}

/**
 * 计算已筹集金额在目标金额中占的百分比
 */
const percentage = computed(() => {
  if (!projectDetail.value)
    return
  if (projectDetail.value.raisedAmount === 0)
    return 0
  return projectDetail.value.raisedAmount / projectDetail.value.targetAmount * 100
})

/**
 * 选中的money
 */

/**
 *捐款数量
 */
const donationValue = ref<number>(100)

/**
 * 金额列表
 */
const moneyList = [
  {
    name: `${ProjectMoney.ONE_HUNDRED}元`,
    money: ProjectMoney.ONE_HUNDRED,
  },
  {
    name: `${ProjectMoney.TWO_HUNDRED}元`,
    money: ProjectMoney.TWO_HUNDRED,
  },
  {
    name: `${ProjectMoney.THREE_HUNDRED}元`,
    money: ProjectMoney.THREE_HUNDRED,
  },

]

/**
 * 给项目捐款
 */
const createProjectDonation = async () => {
  await createProjectDonationService(projectDetail.value!.id, donationValue.value)

  uni.showToast({
    title: '捐赠成功',
    icon: 'none',
  })

  popupRef.value.close()
}

/** 自定义金额 */
const customMoney = () => {
  console.log(`donationValue:${donationValue.value}`)

  uni.showModal({
    title: '自定义金额',
    placeholderText: '请输入你们要捐赠的金额',
    editable: true,
    success: (success) => {
      const money = Number(success.content)
      if (Number.isNaN(money)) {
        return uni.showToast({
          title: '请输入数字',
          icon: 'none',
        })
      }
      donationValue.value = money
    },
  })
}

/**
 * 选择金额
 */
const selectedMoney = (money: number) => {
  donationValue.value = money
}

onLoad((options) => {
  if (options) {
    getProjectDetail(options.projectId)
  }
})

onShareAppMessage(() => {
  // 分享参数
  return {
    title: projectDetail.value?.projectName,
    path: `${PagePath.PROJECT_DETAIL}?projectId=${projectDetail.value?.id}`,
    imageUrl: projectDetail.value?.imgUrl,
  }
})
</script>

<template>
  <view class="project-container">
    <hope-nav-bar :title="PageTitle.PROJECT_DETAIL" is-back-icon />
    <view v-if="projectDetail" class="project-scroll-container">
      <!-- 滚动区域 -->
      <scroll-view scroll-y class="project-scroll-content">
        <view class="project-img-box">
          <image :src="projectDetail.imgUrl" mode="aspectFit" class="project-img" />
        </view>
        <view class="project-content">
          <section>
            <uni-section
              type="line" :title="projectDetail.projectName" :sub-title="projectDetail.brief"
              sub-title-font-size="30rpx" title-font-size="36rpx"
            />
            <view class="project-progress">
              <view class="project-progress-chart">
                <!-- 圆环进度条 使用社区提供 -->
                <hope-progress
                  :rate="percentage" width="36rpx" :start-angle="0" active-color="#ED4556"
                  inactive-color="#ffffff" :fillet="true"
                >
                  <text class="project-progress-chart-text">
                    {{ percentage }}%
                  </text>
                </hope-progress>
              </view>
              <view class="project-progress-count">
                <text class="project-progress-count-text">
                  目标:{{ convertNumber(projectDetail.targetAmount) }}
                </text>
                <text class="project-progress-count-text">
                  已筹集:{{ convertNumber(projectDetail.raisedAmount) }}
                </text>
              </view>
            </view>
          </section>

          <section>
            <uni-section type="line" title="项目实施计划" title-font-size="36rpx" sub-title-font-size="30rpx" />
            <text class="project-content-text">
              {{ projectDetail.implementationPlan }}
            </text>
          </section>

          <section>
            <uni-section type="line" title="项目介绍" title-font-size="36rpx" sub-title-font-size="30rpx" />

            <view class="project-content-text">
              <mpHtml :domain="domain" :content="projectDetail.projectDescHtml" />
            </view>
          </section>
        </view>
      </scroll-view>
    </view>

    <!-- 捐款按钮 -->
    <view class="project-operate">
      <hope-button title="捐赠" class="mr-2 w-full" @on-click="openPopup" />
      <hope-button-share />
    </view>

    <!-- 捐款弹框 -->
    <uni-popup ref="popupRef">
      <view class="donate">
        <view class="donate-header">
          <text class="donate-header-text">
            捐赠{{ donationValue }}元
          </text>
          <image class="donate-close" :src="IconPath.DELETE" mode="scaleToFill" @click="closePopup" />
        </view>

        <view class="donate-content">
          <text
            v-for="money in moneyList" :key="money.name" class="donate-money" :class="{
              'donate-money--active': money.money === donationValue,
            }" donation-value @click="() => selectedMoney(money.money)"
          >
            {{ money.money }}
          </text>
          <view class="donate-money" @click="customMoney">
            自定义金额
          </view>

          <view @click="createProjectDonation">
            <hope-button title="捐款" class="mt-3" />
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
.project {
  &-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden
  }

  &-scroll {
    &-container {
      flex: 1;
      overflow: scroll;
    }

    &-content {
      height: 100%;
    }
  }

  &-progress {
    display: flex;
    border-radius: $border-radius-base;
    border: 1px solid $bg-gray;
    padding: 42rpx;

    &-chart {
      width: 250rpx;
      height: 250rpx;
      flex: 1;

      &-text {
        font-size: $font-size-lg;
        color: $color-primary;
      }
    }

    &-count {
      display: flex;
      flex: 1;
      gap: 30rpx;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &-text {
        font-size: $font-size-lg;
        color: $uni-text-color-grey;
      }
    }
  }

  &-img {
    width: 100%;
    height: 450rpx;
    background-color: $color-white;
    border-radius: $border-radius-base;

    &-box {
      padding: 50rpx 30rpx;
    }
  }

  &-content {
    padding: 30rpx;
    background-color: $color-white;

    &-text {
      font-size: $font-size-base;
      color: $uni-text-color-grey;
    }
  }

  &-operate {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: $color-white;
    padding-inline: 30rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    padding-top: 16rpx;
  }
}

.donate {
  padding: 30rpx;
  background-color: $color-white;
  flex-direction: column;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-text {
      font-size: $font-size-lg;
    }

  }

  &-close {
    width: 40rpx;
    height: 40rpx;
  }

  &-content {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    margin-top: 30rpx;
  }

  &-money {
    padding-block: 20rpx;
    text-align: center;
    font-size: $font-size-lg;
    color: $color-primary;
    background-color: $bg-primary-opacity-1;
    box-sizing: border-box;

    &--active {
      border: 1px solid $color-primary;
    }
  }

}
</style>
